<template>
  <div class="icon-item">
    <!-- 图标 -->
    <div class="icon" @click="onRouteTo(field)" :style="
    {backgroundColor: bgColor}
    ">
      <span :class="['iconfont', icon]"></span>
    </div>
    <!-- 字体 -->
    <p class="icon-text">{{ iconText }}</p>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'CategoryIconsSub',
  props: {
    bgColor: String,
    icon: String,
    field: String,
    iconText: {
      type: String,
      default () {
        return '分类'
      }
    }
  },
  methods: {
    ...mapMutations(['selectField']),
    onRouteTo (field) {
      // 改变vuex中的field
      this.selectField(field);
      // 跳转
      this.$router.push('/list');
    }

  }
}
</script>

<style lang="scss" scoped>
// 这样写的好处是变量
@import '@/assets/style/mixins.scss';
@import '@/assets/style/variables.scss';
.icon-item {
  @include flex-column;
  @include vh-center;
  width: 25%;
  .icon {
    @include flex-column;
    @include vh-center;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    .iconfont {
      font-size: .26rem;
      color: #fff;
    }
  }
  .icon-text {
    margin-top: .08rem;
    font-size: .16rem;
  }
}
</style>